با پیاده‌سازی برچسب‌های فرم دسترس‌پذیر، تجارب وب فراگیر را برای کاربران در سراسر جهان تضمین کنید. بهترین شیوه‌ها را برای انطباق با WCAG و بهبود قابلیت استفاده بیاموزید.
برچسب‌های فرم: الزامات ضروری دسترس‌پذیری فیلدهای ورودی
فرم‌ها بخش اساسی وب هستند. از فرم‌های تماس ساده گرفته تا فرآیندهای پیچیده پرداخت در فروشگاه‌های آنلاین، آن‌ها به کاربران امکان تعامل با وب‌سایت‌ها و اپلیکیشن‌ها را می‌دهند. با این حال، فرم‌هایی که به درستی طراحی نشده‌اند می‌توانند موانع قابل توجهی برای کاربران دارای معلولیت ایجاد کنند. یک عنصر حیاتی در ایجاد فرم‌های دسترس‌پذیر، استفاده صحیح از برچسب‌های فرم است. این راهنما یک نمای کلی جامع از الزامات دسترس‌پذیری برچسب‌های فرم ارائه می‌دهد تا اطمینان حاصل شود که فرم‌های شما برای همه، صرف‌نظر از توانایی‌هایشان، قابل استفاده هستند.
چرا برچسب‌های فرم دسترس‌پذیر مهم هستند؟
برچسب‌های فرم دسترس‌پذیر به دلایل متعددی حیاتی هستند:
- قابلیت استفاده: برچسب‌های واضح و مختصر به همه کاربران کمک می‌کند تا هدف هر فیلد ورودی را درک کنند و قابلیت استفاده کلی را بهبود می‌بخشد.
- دسترس‌پذیری: برچسب‌ها اطلاعات ضروری را برای کاربران دارای معلولیت، به ویژه کسانی که به فناوری‌های کمکی مانند صفحه‌خوان‌ها متکی هستند، فراهم می‌کنند. بدون برچسب‌های مناسب، این کاربران ممکن است قادر به تکمیل فرم‌ها نباشند.
- انطباق با WCAG: دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) ایجاب می‌کند که تمام کنترل‌های فرم دارای برچسب‌های مرتبط باشند. رعایت این دستورالعمل‌ها تضمین می‌کند که وب‌سایت شما در بسیاری از حوزه‌های قضایی دسترس‌پذیر و از نظر قانونی منطبق است.
- سئو: اگرچه یک عامل رتبه‌بندی مستقیم نیست، وب‌سایت‌های دسترس‌پذیر معمولاً تجربه کاربری بهتری دارند که می‌تواند به طور غیرمستقیم عملکرد سئو را بهبود بخشد.
درک الزامات WCAG برای برچسب‌های فرم
WCAG دستورالعمل‌های مشخصی را برای تضمین دسترس‌پذیری فرم ارائه می‌دهد. در اینجا الزامات کلیدی مربوط به برچسب‌های فرم آورده شده است:
معیار موفقیت WCAG 2.1 1.1.1 محتوای غیرمتنی (سطح A)
اگرچه این معیار مستقیماً به برچسب‌ها مربوط نمی‌شود، اما بر اهمیت ارائه جایگزین‌های متنی برای تمام محتوای غیرمتنی، از جمله کپچاها و تصاویر استفاده شده در فرم‌ها، تأکید دارد. یک فرم با برچسب‌گذاری صحیح برای ارائه زمینه به این جایگزین‌ها حیاتی است.
معیار موفقیت WCAG 2.1 1.3.1 اطلاعات و روابط (سطح A)
اطلاعات، ساختار و روابطی که از طریق ارائه منتقل می‌شوند باید به صورت برنامه‌نویسی قابل تشخیص باشند یا در متن در دسترس باشند. این بدان معناست که رابطه بین یک برچسب و فیلد ورودی مربوط به آن باید به صراحت در کد HTML تعریف شود.
معیار موفقیت WCAG 2.1 2.4.6 عناوین و برچسب‌ها (سطح AA)
عناوین و برچسب‌ها موضوع یا هدف را توصیف می‌کنند. برچسب‌های فرم زمینه توصیفی را برای فیلدهای ورودی فراهم می‌کنند و درک ساختار فرم و تکمیل دقیق آن را برای کاربران آسان‌تر می‌سازند.
معیار موفقیت WCAG 2.1 3.3.2 برچسب‌ها یا دستورالعمل‌ها (سطح A)
زمانی که محتوا نیاز به ورودی کاربر دارد، برچسب‌ها یا دستورالعمل‌ها ارائه می‌شوند.
معیار موفقیت WCAG 2.1 4.1.2 نام، نقش، مقدار (سطح A)
برای تمام اجزای رابط کاربری (از جمله اما نه محدود به عناصر فرم، پیوندها و اجزای تولید شده توسط اسکریپت‌ها)، نام و نقش باید به صورت برنامه‌نویسی قابل تشخیص باشند؛ وضعیت‌ها، ویژگی‌ها و مقادیری که توسط کاربر قابل تنظیم هستند باید به صورت برنامه‌نویسی قابل تنظیم باشند؛ و اعلان تغییرات این موارد باید برای عامل‌های کاربری، از جمله فناوری‌های کمکی، در دسترس باشد.
بهترین شیوه‌ها برای پیاده‌سازی برچسب‌های فرم دسترس‌پذیر
در اینجا چندین بهترین شیوه برای ایجاد برچسب‌های فرم دسترس‌پذیر آورده شده است:
۱. از عنصر <label> استفاده کنید
عنصر <label> راه اصلی برای مرتبط کردن یک برچسب متنی با یک فیلد ورودی است. این عنصر یک اتصال معنایی و ساختاری بین برچسب و کنترل فراهم می‌کند. ویژگی for در عنصر <label> باید با ویژگی id فیلد ورودی مربوطه مطابقت داشته باشد.
مثال:
<label for="name">نام:</label>
<input type="text" id="name" name="name">
مثال نادرست (اجتناب کنید):
<span>نام:</span>
<input type="text" id="name" name="name">
استفاده از عنصر span به جای label ارتباط برنامه‌نویسی لازم را ایجاد نمی‌کند و آن را برای صفحه‌خوان‌ها غیرقابل دسترس می‌سازد.
۲. برچسب‌ها را به صراحت با فیلدهای ورودی مرتبط کنید
همانطور که در مثال بالا نشان داده شد، با استفاده از ویژگی‌های for و id از وجود یک ارتباط واضح و صریح بین برچسب و فیلد ورودی اطمینان حاصل کنید.
۳. برچسب‌ها را به درستی قرار دهید
محل قرارگیری برچسب‌ها می‌تواند بر قابلیت استفاده تأثیر بگذارد. به طور کلی، برچسب‌ها باید در این مکان‌ها قرار گیرند:
- بالای فیلد ورودی: این اغلب دسترس‌پذیرترین و کاربرپسندترین گزینه است، به ویژه برای فیلدهای متنی و ناحیه‌های متنی.
- سمت چپ فیلد ورودی: رایج است، اما ممکن است برای کاربرانی که دارای اختلالات بینایی هستند و در اسکن صفحه مشکل دارند، کمتر مؤثر باشد.
- برای دکمه‌های رادیویی و چک‌باکس‌ها: برچسب‌ها باید در سمت راست کنترل قرار گیرند.
هنگام تعیین موقعیت برچسب‌ها، هنجارهای فرهنگی را در نظر بگیرید. در برخی زبان‌ها، برچسب‌ها به طور سنتی بعد از فیلد ورودی قرار می‌گیرند. طراحی خود را برای تطبیق با این ترجیحات تنظیم کنید.
۴. برچسب‌های واضح و مختصر ارائه دهید
برچسب‌ها باید کوتاه، توصیفی و قابل فهم باشند. از اصطلاحات تخصصی یا فنی که ممکن است کاربران را گیج کند، خودداری کنید. به عنوان مثال، به جای «UserID»، از «نام کاربری» یا «آدرس ایمیل» استفاده کنید. بومی‌سازی را در نظر بگیرید. اطمینان حاصل کنید که برچسب‌های شما به راحتی به زبان‌های مختلف ترجمه می‌شوند و در عین حال معنای خود را حفظ می‌کنند.
۵. در صورت لزوم از ویژگی‌های ARIA استفاده کنید
ویژگی‌های ARIA (Accessible Rich Internet Applications) می‌توانند دسترس‌پذیری عناصر فرم را، به ویژه در سناریوهای پیچیده، افزایش دهند. با این حال، از ARIA با احتیاط و تنها زمانی استفاده کنید که عناصر و ویژگی‌های بومی HTML کافی نباشند.
- aria-label: از این ویژگی برای ارائه برچسب زمانی استفاده کنید که یک برچسب قابل مشاهده امکان‌پذیر یا عملی نیست.
- aria-labelledby: از این ویژگی برای ارجاع به ID یک عنصر موجود در صفحه برای استفاده به عنوان برچسب استفاده کنید.
- aria-describedby: از این ویژگی برای ارائه اطلاعات یا دستورالعمل‌های اضافی برای فیلد ورودی استفاده کنید. این برای ارائه زمینه یا توضیح قوانین اعتبارسنجی مفید است.
مثال با استفاده از aria-label:
<input type="search" aria-label="جستجو در وب‌سایت">
مثال با استفاده از aria-labelledby:
<h2 id="newsletter-title">اشتراک در خبرنامه</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="آدرس ایمیل خود را وارد کنید">
۶. عناصر فرم مرتبط را با <fieldset> و <legend> گروه‌بندی کنید
عنصر <fieldset> کنترل‌های فرم مرتبط را گروه‌بندی می‌کند و عنصر <legend> یک عنوان برای fieldset فراهم می‌کند. این کار ساختار فرم را بهبود می‌بخشد و درک روابط بین فیلدهای ورودی مختلف را برای کاربران آسان‌تر می‌کند.
مثال:
<fieldset>
<legend>اطلاعات تماس</legend>
<label for="name">نام:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">
</fieldset>
۷. پیام‌های خطای واضح ارائه دهید
هنگامی که کاربران هنگام پر کردن فرم دچار خطا می‌شوند، پیام‌های خطای واضح و آموزنده‌ای ارائه دهید که توضیح می‌دهد چه چیزی اشتباه بوده و چگونه خطا را اصلاح کنند. این پیام‌های خطا را با استفاده از ویژگی‌های ARIA مانند aria-describedby به فیلدهای ورودی مربوطه مرتبط کنید.
مثال:
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">لطفاً یک آدرس ایمیل معتبر وارد کنید.</span>
اطمینان حاصل کنید که پیام خطا از نظر بصری متمایز است (مثلاً با استفاده از رنگ یا آیکون) و برای فناوری‌های کمکی به صورت برنامه‌نویسی قابل دسترس است.
۸. از کنتراست رنگ کافی استفاده کنید
برای برآورده کردن الزامات WCAG، از کنتراست رنگ کافی بین متن برچسب و رنگ پس‌زمینه اطمینان حاصل کنید. از یک ابزار تحلیلگر کنتراست رنگ برای تأیید اینکه نسبت کنتراست حداقل الزامات را برآورده می‌کند (۴.۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ) استفاده کنید. این به کاربران کم‌بینا کمک می‌کند تا برچسب‌ها را راحت‌تر بخوانند.
۹. از دسترس‌پذیری با صفحه‌کلید اطمینان حاصل کنید
تمام عناصر فرم باید تنها با استفاده از صفحه‌کلید قابل دسترس باشند. کاربران باید بتوانند با استفاده از کلید Tab در فرم جابجا شوند و با استفاده از کلید Spacebar یا Enter با کنترل‌های فرم تعامل داشته باشند. فرم‌های خود را به طور کامل با صفحه‌کلید آزمایش کنید تا از دسترس‌پذیری صحیح با صفحه‌کلید اطمینان حاصل کنید.
۱۰. با فناوری‌های کمکی آزمایش کنید
بهترین راه برای اطمینان از دسترس‌پذیری فرم‌های شما، آزمایش آن‌ها با فناوری‌های کمکی مانند صفحه‌خوان‌ها (مانند NVDA، JAWS، VoiceOver) است. این کار به شما کمک می‌کند تا هرگونه مشکل دسترس‌پذیری را که ممکن است در طول بازرسی بصری آشکار نباشد، شناسایی کنید. کاربران دارای معلولیت را در فرآیند آزمایش خود مشارکت دهید تا بازخورد ارزشمندی دریافت کنید.
نمونه‌هایی از پیاده‌سازی برچسب‌های فرم دسترس‌پذیر
مثال ۱: فرم تماس ساده (چشم‌انداز بین‌المللی)
یک فرم تماس برای مخاطبان جهانی را در نظر بگیرید. برچسب‌ها باید واضح، مختصر و به راحتی قابل ترجمه باشند.
<form>
<label for="name">نام کامل:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">آدرس ایمیل:</label>
<input type="email" id="email" name="email"><br><br>
<label for="country">کشور:</label>
<select id="country" name="country">
<option value="">انتخاب کشور</option>
<option value="us">ایالات متحده</option>
<option value="ca">کانادا</option>
<option value="uk">بریتانیا</option>
<option value="de">آلمان</option>
<option value="fr">فرانسه</option>
<option value="jp">ژاپن</option>
<option value="au">استرالیا</option>
<!-- کشورهای بیشتری اضافه کنید -->
</select><br><br>
<label for="message">پیام:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="ارسال">
</form>
به استفاده از «نام کامل» به جای فقط «نام» برای وضوح بیشتر توجه کنید، به ویژه برای فرهنگ‌هایی که نام خانوادگی قبل از نام کوچک می‌آید.
مثال ۲: فرم پرداخت فروشگاه آنلاین
فرم‌های پرداخت فروشگاه‌های آنلاین اغلب به اطلاعات حساس نیاز دارند. برچسب‌ها و دستورالعمل‌های واضح برای ایجاد اعتماد و تضمین دسترس‌پذیری حیاتی هستند.
<form>
<fieldset>
<legend>آدرس حمل و نقل</legend>
<label for="shipping_name">نام کامل:</label>
<input type="text" id="shipping_name" name="shipping_name"><br><br>
<label for="shipping_address">آدرس:</label>
<input type="text" id="shipping_address" name="shipping_address"><br><br>
<label for="shipping_city">شهر:</label>
<input type="text" id="shipping_city" name="shipping_city"><br><br>
<label for="shipping_zip">کد پستی:</label>
<input type="text" id="shipping_zip" name="shipping_zip"><br><br>
<label for="shipping_country">کشور:</label>
<select id="shipping_country" name="shipping_country">
<option value="">انتخاب کشور</option>
<option value="us">ایالات متحده</option>
<option value="ca">کانادا</option>
<!-- کشورهای بیشتری اضافه کنید -->
</select>
</fieldset>
<fieldset>
<legend>اطلاعات پرداخت</legend>
<label for="card_number">شماره کارت اعتباری:</label>
<input type="text" id="card_number" name="card_number"><br><br>
<label for="expiry_date">تاریخ انقضا (YY/MM):</label>
<input type="text" id="expiry_date" name="expiry_date" placeholder="YY/MM"><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv"><br><br>
</fieldset>
<input type="submit" value="ثبت سفارش">
</form>
استفاده از fieldsetها و legendها فرم را به وضوح به بخش‌های منطقی سازماندهی می‌کند. متن جایگزین (placeholder) راهنمایی اضافی ارائه می‌دهد، اما به یاد داشته باشید که متن جایگزین نباید به عنوان جایگزینی برای برچسب‌ها استفاده شود.
مثال ۳: فرم ثبت‌نام با ویژگی‌های ARIA
یک فرم ثبت‌نام را در نظر بگیرید که در آن نام مستعار اختیاری است. با استفاده از ویژگی‌های ARIA، می‌توانیم زمینه اضافی فراهم کنیم.
<form>
<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">رمز عبور:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="nickname">نام مستعار (اختیاری):</label>
<input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
<span id="nickname-info">این نام مستعار به صورت عمومی نمایش داده خواهد شد.</span><br><br>
<input type="submit" value="ثبت‌نام">
</form>
ویژگی aria-describedby فیلد ورودی نام مستعار را به یک عنصر span که اطلاعات اضافی در مورد نحوه استفاده از نام مستعار ارائه می‌دهد، پیوند می‌دهد.
ابزارهایی برای آزمایش دسترس‌پذیری فرم
چندین ابزار می‌توانند به شما در ارزیابی دسترس‌پذیری فرم‌هایتان کمک کنند:
- Accessibility Insights: یک افزونه مرورگر که مشکلات دسترس‌پذیری را در صفحات وب شناسایی می‌کند.
- WAVE (Web Accessibility Evaluation Tool): یک ابزار آنلاین که صفحات وب را برای خطاهای دسترس‌پذیری ارزیابی می‌کند.
- axe DevTools: یک افزونه مرورگر که آزمایش خودکار دسترس‌پذیری را انجام می‌دهد.
- صفحه‌خوان‌ها (NVDA, JAWS, VoiceOver): آزمایش با صفحه‌خوان‌ها برای شناسایی مشکلات دسترس‌پذیری که ممکن است از طریق آزمایش خودکار آشکار نشوند، ضروری است.
نتیجه‌گیری
برچسب‌های فرم دسترس‌پذیر برای ایجاد تجارب وب فراگیر ضروری هستند. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید اطمینان حاصل کنید که فرم‌های شما برای همه، صرف‌نظر از توانایی‌هایشان، قابل استفاده هستند. اولویت دادن به دسترس‌پذیری نه تنها به نفع کاربران دارای معلولیت است، بلکه قابلیت استفاده کلی وب‌سایت شما را برای همه کاربران بهبود می‌بخشد. به یاد داشته باشید که به طور مداوم فرم‌های خود را با فناوری‌های کمکی آزمایش کنید و کاربران دارای معلولیت را در فرآیند آزمایش خود مشارکت دهید تا بازخورد ارزشمندی دریافت کرده و دسترس‌پذیری وب‌سایت خود را به طور مداوم بهبود بخشید.
پذیرش دسترس‌پذیری فقط یک مسئله انطباق نیست؛ بلکه در مورد ایجاد یک وب فراگیرتر و عادلانه‌تر برای همه است. با سرمایه‌گذاری در طراحی فرم دسترس‌پذیر، شما تعهد خود را به فراگیری نشان می‌دهید و تجربه کاربری بهتری برای همه ایجاد می‌کنید.